import { useEffect, useRef, useState } from 'react';
import { Renderer, requestDevice } from './render';

const width = 640;
const height = 480;

function ShadowMappingDemo() {
  const canvas = useRef<HTMLCanvasElement>(null!);
  const [renderer, setRenderer] = useState<Renderer>();

  useEffect(() => {
    let renderer: Renderer;

    requestDevice().then(device => {
      renderer = new Renderer(canvas.current, device);

      setRenderer(renderer);
    });

    return () => {
      renderer?.dispose();

      setRenderer(undefined);
    };
  }, []);

  return <canvas ref={canvas} width={width} height={height} style={{ width, height }} />;
}

export default ShadowMappingDemo;
